<template>
	<div class="citylist">
		<!-- 定位城市 -->
		<div class="gps-cities common">
			<label>定位/附近城市</label>
		<ul>
			<li>{{show}}</li>
		</ul>
		</div>
		
		<!-- 热门城市 -->
		<div class="hot-cities common">
			<p>热门城市</p>
			<ul>
				<li v-for="item in hotCList" :key="item.code" @click="toHome(item.name)" :class="{'default' : show == item.name}">{{item.name}}</li>
			</ul>
		</div>
		
		<!-- 按字母排序 -->
		<div class="all-cities common">
			<article v-for="(item,index) in cityList" :key="index">
				<h3>字母{{item.initial}}开头的城市</h3>
				<ul>
					<li v-for="key in item.list" :key="key.code" @click="toHome(key.name)" :class="{'default' : show == key.name}">{{key.name}}</li>
				</ul>
			</article>
		</div>
	</div>
</template>

<script>
	/* 
		效果1：当选中某个城市，立即返回首页【问题：当另一个组件滚动到下方之后跳转，不刷新页面的情况滚动条会记录上一页的位置；不会自动返回组建的头部】
		入口程序
			路由导出的对象.afterEach( (to[跳转到指定位置] , from[从哪里来] , next)=>{
				// 跳转之后你需要组件做什么
			} )
		效果2：当选中某个城市，被选中的城市有默认样式；定位城市的内同替换成被选中的城市【问题：当结合路由切换的时候，当前组件会被重新创建，所有的数据将会还原（要么使用父组件传递数据，要么将数据将数据共享）】
		效果3：当选中某个城市，不仅替换Home/Banner的城市；需要将其保留在本地
	 */
	
	// 引入辅助函数：先引入函数，再调用函数
	import {mapMutations , mapState} from 'vuex';
	
	export default{
		name:'CityList',
		data(){
			return{
				hotCList:[],
				cityList:[],
				show:'广州',
			}
		},
		mounted(){
			if(localStorage.city){
				this.show = localStorage.city;
			}
		},
		computed:{
			...mapState(['cityName'])
		},
		methods:{
			toHome(cname){
				// 当点击某个城市的时候，获取传递过来的城市名
				this.show = cname;
				// 调用并传参被选中的城市名进行传递
				this.changeCity(cname);
				// 返回首页
				this.$router.push('/');
			},
			// 激活mutations的方法
			...mapMutations(['changeCity'])
		},
		// 组件创建之后
		created(){
			let that =this;
			// get发起请求，/api/city.json
			this.axios.get('/api/city.json').then((res)=>{
				if(res.status ===200){
					// 数据分配
					let data = res.data.data;
					that.hotCList = data.hotCities;
					that.cityList = data.city;
				}
			}).catch((error)=>{
				
			})
		}
	}
</script>

<style scoped>
.citylist .common ul .default{
	background-color: #FED101;
	color: white;
}
.citylist{
	padding-top: 0.2rem;
}
/* 公共样式 */
.citylist .common{
	padding: 0.2rem 0.25rem;
	line-height: 0.4rem;
}
.citylist .common p{
	font-size: 0.35rem;
	line-height: 0.4rem;
}
.citylist .common ul{
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}
.citylist .common ul li{
	width: 14%;
	background-color: #e6e6e6;
	height: 0.82rem;
	line-height: 0.82rem;
	border-radius: 0.3rem;
	margin: 0.2rem 0.08rem;
	text-align: center;
	font-size: 0.3rem;
}
.citylist article{
	padding-top: 0.2rem;
}
.citylist article h3{
	line-height: 0.8rem;
	font-size: 0.35rem;
	border-top: 0.02rem solid gray;
}
</style>
